Mobile App Development AMP Story এর Components (amp-story, amp-story-page, amp-story-grid-layer) গাইড ও নোট

AMP Story হল গুগল AMP (Accelerated Mobile Pages) এর একটি বিশেষ কম্পোনেন্ট যা মোবাইল-ফ্রেন্ডলি এবং ইন্টারেকটিভ স্টোরি তৈরি করতে সহায়তা করে। এটি মূলত ব্যবহারকারীদের জন্য এক ধরনের "মোবাইল স্টোরি" অভিজ্ঞতা প্রদান করে, যা ব্যবহারকারীরা সহজেই স্ক্রল করে দেখতে পারেন। AMP Story পেজগুলো সাধারণত স্লাইড বা পেজের মাধ্যমে প্রদর্শিত হয় এবং এতে টেক্সট, ইমেজ, ভিডিও, অ্যানিমেশন ইত্যাদি উপাদান অন্তর্ভুক্ত থাকতে পারে।

AMP Story এর কম্পোনেন্টস:

AMP Story তৈরি করতে বেশ কিছু নির্দিষ্ট কম্পোনেন্ট এবং ট্যাগ ব্যবহার করা হয়, যেমন amp-story, amp-story-page, এবং **amp-story-grid-layer**। এই কম্পোনেন্টগুলোকে একত্রে ব্যবহার করে একটি ইন্টারেকটিভ এবং ভিজ্যুয়াল আকর্ষণীয় স্টোরি তৈরি করা যায়।

1. amp-story

amp-story হল AMP স্টোরির মূল রুট কম্পোনেন্ট যা স্টোরির সমস্ত কন্টেন্ট ধারণ করে। এটি একটি কনটেইনার হিসেবে কাজ করে এবং এর ভিতরে একাধিক পেজ (স্টোরি পেজ) থাকে। এই কম্পোনেন্টটি সাইটে পুরো AMP স্টোরি তৈরি করার জন্য ব্যবহৃত হয়।

amp-story কম্পোনেন্টের বৈশিষ্ট্য:

• এটি একটি কনটেইনার: amp-story কম্পোনেন্টটি AMP স্টোরির মূল কনটেইনার হিসাবে কাজ করে, যেখানে সমস্ত পেজ এবং লেয়ার সন্নিবেশিত থাকে।
• ডিভাইসের স্ক্রীনে ফিট করা: এটি রেসপন্সিভভাবে কাজ করে, যা মোবাইল ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।
• স্টোরির পেজের ভিজ্যুয়াল কার্যকলাপ: এটি সাধারণত পুরোপুরি পূর্ণ পর্দায় দেখানো হয়, যেখানে ব্যবহারকারীরা সহজে এক পেজ থেকে অন্য পেজে স্লাইড করতে পারে।

amp-story উদাহরণ:

<amp-story standalone title="Example AMP Story" publisher="Your Publisher" publisher-logo-src="logo.png" font="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
    <!-- Story Pages will go here -->
</amp-story>

এখানে:

• standalone: এটি নির্দেশ করে যে স্টোরিটি একটি স্বতন্ত্র অ্যাপ্লিকেশন হিসাবে চলবে।
• title: স্টোরির শিরোনাম।
• publisher: স্টোরির প্রকাশক।
• publisher-logo-src: প্রকাশকের লোগোর সোর্স URL।
• font: ফন্টের জন্য কাস্টম CSS।

2. amp-story-page

amp-story-page হল AMP স্টোরির প্রতিটি পেজের জন্য ব্যবহৃত কম্পোনেন্ট। এটি amp-story কম্পোনেন্টের মধ্যে এক বা একাধিক পেজকে অন্তর্ভুক্ত করে, যেখানে প্রতিটি পেজে ভিন্ন ভিন্ন কন্টেন্ট থাকতে পারে (যেমন টেক্সট, ইমেজ, ভিডিও ইত্যাদি)।

amp-story-page কম্পোনেন্টের বৈশিষ্ট্য:

• পূর্ণ পর্দায় কন্টেন্ট প্রদর্শন: প্রতিটি amp-story-page সম্পূর্ণ স্ক্রীনে কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়।
• একাধিক পেজে বিভক্ত কন্টেন্ট: AMP স্টোরি সাধারণত একাধিক পেজে বিভক্ত থাকে, যেখানে প্রতিটি পেজে আলাদা কন্টেন্ট থাকে।
• পেজ ট্রানজিশন: যখন ব্যবহারকারী এক পেজ থেকে অন্য পেজে চলে যায়, তখন তা ট্রানজিশন বা অ্যানিমেশন সহকারে হয়।

amp-story-page উদাহরণ:

<amp-story-page id="page1">
    <amp-story-grid-layer template="fill">
        <h1>Welcome to the Story</h1>
    </amp-story-grid-layer>
</amp-story-page>

এখানে:

• id: প্রতিটি পেজের জন্য একটি ইউনিক আইডি।
• amp-story-grid-layer: এর মধ্যে টেক্সট বা অন্যান্য কন্টেন্ট রাখা হয়।
• template="fill": এটি নির্দেশ করে যে লেয়ারটি সম্পূর্ণ পেজে ফিল করবে।

3. amp-story-grid-layer

amp-story-grid-layer হল একটি উপ-কম্পোনেন্ট যা amp-story-page এর মধ্যে থাকে এবং কন্টেন্টের লেয়ার তৈরি করে। প্রতিটি পেজের ভিতরে একাধিক amp-story-grid-layer থাকতে পারে, যেখানে বিভিন্ন ধরনের কন্টেন্ট (যেমন টেক্সট, ইমেজ, ভিডিও ইত্যাদি) প্রদর্শিত হয়।

amp-story-grid-layer কম্পোনেন্টের বৈশিষ্ট্য:

• কন্টেন্টের লেয়ার: এটি একটি গ্রিড লেয়ার হিসাবে কাজ করে এবং এখানে বিভিন্ন কন্টেন্ট যেমন টেক্সট, ছবি, ভিডিও, বাটন ইত্যাদি অন্তর্ভুক্ত করা যেতে পারে।
• টেমপ্লেট ফর্ম্যাট: amp-story-grid-layer বিভিন্ন টেমপ্লেটে কন্টেন্ট প্রদর্শন করতে পারে, যেমন ফিল (পূর্ণ পেজ), সেন্টার (কেন্দ্রবিন্দুতে), অথবা স্কেল (স্কেলিং উপাদান)।

amp-story-grid-layer উদাহরণ:

<amp-story-page id="page1">
    <amp-story-grid-layer template="fill">
        <amp-img src="image.jpg" width="640" height="360" layout="responsive"></amp-img>
    </amp-story-grid-layer>
    <amp-story-grid-layer template="vertical">
        <h1>Welcome to AMP Story</h1>
    </amp-story-grid-layer>
</amp-story-page>

এখানে:

• প্রথম amp-story-grid-layer টেমপ্লেটটি পূর্ণ স্ক্রীন ছবি (ফিল) প্রদর্শন করবে।
• দ্বিতীয় amp-story-grid-layer টেমপ্লেটে টেক্সট থাকবে যা পেজের উপরের দিকে থাকবে (ভরাটভাবে)।

AMP Story এর অন্যান্য বৈশিষ্ট্য:

• ইন্টারেক্টিভ কন্টেন্ট: AMP স্টোরি ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ অভিজ্ঞতা প্রদান করে, যেখানে তারা স্লাইড করে স্টোরি দেখতে পারে।
• গুগল সার্চে উপস্থিতি: AMP স্টোরি গুগল সার্চ রেজাল্টে বিশেষভাবে প্রদর্শিত হতে পারে, যা ব্যবহারকারীদের জন্য আরও আকর্ষণীয় এবং সঠিক অভিজ্ঞতা তৈরি করে।
• মোবাইল অপটিমাইজড: AMP স্টোরি মোবাইল ডিভাইসের জন্য অপ্টিমাইজড থাকে, এবং এটি সমস্ত স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শিত হয়।

AMP Story এর ব্যবহার ক্ষেত্র

1. নিউজ এবং মিডিয়া সাইট: খবর এবং মিডিয়া কন্টেন্ট দ্রুত ও ভিজ্যুয়ালভাবে উপস্থাপন করার জন্য।
2. ব্র্যান্ড স্টোরি: ব্র্যান্ডিং এবং মার্কেটিং ক্যাম্পেইনে ব্যবহারকারীদের আকৃষ্ট করার জন্য।
3. ট্রাভেল এবং ইভেন্ট পেজ: ভ্রমণ, ইভেন্ট এবং ট্যুর প্যাকেজের তথ্য স্লাইড আকারে প্রদর্শন করতে।
4. ই-কমার্স সাইট: পণ্যের স্টোরি এবং প্রমোশনের জন্য AMP স্টোরি ব্যবহার করা যেতে পারে।

উপসংহার

AMP স্টোরি একটি শক্তিশালী উপায় হিসেবে কাজ করে মোবাইল ফ্রেন্ডলি, ইন্টারেকটিভ এবং ভিজ্যুয়াল স্টোরি তৈরি করার জন্য। amp-story, amp-story-page, এবং amp-story-grid-layer কম্পোনেন্ট ব্যবহার করে, ডেভেলপাররা অত্যন্ত আকর্ষণীয় এবং দ্রুত লোড হওয়া স্টোরি তৈরি করতে পারে যা মোবাইল ব্যবহারকারীদের জন্য আদর্শ।